<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>请求</title>
    <!-- 链接外部样式文件 -->
    <link rel="stylesheet" href="/stylesheets/home.css">
</head>
<body>

    <h3>请求</h3>
    
    <p class="paragraph">
        当 Express 应用当接收到HTTP请求时，
        Express 应用内部会解析该HTTP请求并创建与之对应的 请求对象(req) 和 响应对象(resp)
    </p>

    <div class="wrapper">
        <a href="/users/list">显示用户列表</a>
        <hr>
        <p>添加新用户</p>
        <form action="/users/add" method="post">
            姓名:
            <input type="text" name="name">
            <br>
            性别:
            <input type="radio" name="gender" value="靓仔"> 男
            <input type="radio" name="gender" value="靓妹"> 女
            <br>
            地址:
            <textarea name="address"></textarea>
            <br>
            <button type="submit">添加</button>
        </form>
    </div>

    <div class="wrapper">
        <p>通过解析请求对象理解HTTP请求的构成</p>
        <a href="/explore/request">超链接</a>
        <hr>
        <!-- 通过表单的 action 属性来确定将表单中的数据项提交给哪个程序 -->
        <form action="/explore/request" method="get">
            采用 GET方式提交表单:
            <input type="text" name="nickname" placeholder="昵称">
            <input type="text" name="password" placeholder="密码">
            <button type="submit">提交</button>
        </form>
        <hr>
        <form action="/explore/request" method="post">
            采用POST方式提交表单:
            <input type="text" name="nickname" placeholder="昵称">
            <input type="text" name="password" placeholder="密码">
            <button type="submit">提交</button>
        </form>
        <hr>
        <form action="/explore/request" method="post" enctype="text/plain">
            POST方式提交text/plain表单:
            <input type="text" name="nickname" placeholder="昵称">
            <input type="text" name="password" placeholder="密码">
            <button type="submit">提交</button>
        </form>
        <hr>
        <button type="button" class="async">发送异步请求(XMLHttpRequest)</button>
        <button type="button" class="fetch">发送异步请求(Fetch API)</button>
    </div>

    <script src="/javascripts/async.js"></script>
    <script src="/javascripts/fetch.js"></script>

    <div class="wrapper">
        <p>通过 POST 方式发送 multipart/form-data 数据</p>
        <hr>
        <form action="/explore/multi" method="post" enctype="multipart/form-data">
            通过 multipart/form-data 方式处理文本数据: 
            <input type="text" name="email" placeholder="请输入登录邮箱">
            <input type="password" name="password" placeholder="请输入登录密码">
            <button type="submit">提交</button>
        </form>
        <hr>
        <form action="/explore/upload/single" method="post" enctype="multipart/form-data">
            用户名:
            <input type="text" name="username">
            单文件上传:
            <input type="file" name="upfile">
            <button type="submit">提交</button>
        </form>
        <hr>
        <form action="/explore/upload/array" method="post" enctype="multipart/form-data">
            多文件上传:<br>
            <input type="file" name="up"> <br>
            <input type="file" name="up"> <br>
            <input type="file" name="up"> <br>
            <button type="submit">提交</button>
        </form>
        <hr>
        <form action="/explore/upload/fields" method="post" enctype="multipart/form-data">
            多文件上传:<br>
            <input type="file" name="photo"> <br>
            <input type="file" name="plainText"> <br>
            <button type="submit">提交</button>
        </form>
    </div>

    <div class="wrapper">
        <p>
            <a href="/file/list">文件列表</a>
        </p>
        <form action="/file/upload" method="post" enctype="multipart/form-data">
            <!-- 这里的 avatar 与 路由中 upload.single('avatar') 对应 -->
            <input type="file" name="avatar" >
            <button type="submit">上传</button>
        </form>
    </div>

</body>
</html>